<template>
    <inner-layout v-loading="loading">

        <div class="filter-bar clearfix">

            <div class="filter-item">
                <span class="filter-item-title">图表数据源</span>
                <el-select class="filter-item-select" v-model="apiParams.type" placeholder="请选择" @change="filterData">
                    <el-option
                      v-for="item in typeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                </el-select>
            </div>

            <!-- <div class="filter-item">
                <el-button @click="filterData">确定</el-button>
            </div> -->

            <div class="filter-item" v-if="dataList.date.length > 0 && dataList.date.length == dataList.data[apiParams.type].length">
                <i class="el-icon-info"></i>
                {{ dataList.date[dataList.date.length - 1] }}：{{ (dataList.data[apiParams.type][dataList.data[apiParams.type].length - 1] * 1).toFixed(2) }}
            </div>

        </div>

        <div id="chartObj" class="charts-wrap"></div>

        <div class="tip-wrap">
            <div><i class="el-icon-info"></i>可转债数据来源：集思录</div>
            <div class="fr"><a href="https://www.jisilu.cn/data/cbnew/cb_index/" target="_blank">去集思录查看详情&gt;&gt;</a></div>
        </div>

    </inner-layout>
</template>

<script>
import {getJisiluCbIndexHtml, praseJisiluCbIndexHtml } from '@/api/jisilu'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
	name: 'CbIndex',
	components: { },
    directives: { },
	mixins: [],
	data() {
		return {
			loading: false,
			dataList: {
                date: [],
                data: {},
            },
            apiParams: {
                type: 'avg_dblow',
            },
            typeList: [
                {code: 'avg_dblow', name: '双低均值'},
                {code: 'avg_premium_rt', name: '平均溢价率'},
                {code: 'avg_ytm_rt', name: '平均收益率'},
                {code: 'avg_price', name: '平均价格'},
                {code: 'mid_price', name: '中位数价格'},
            ],
            chart: null
		}
	},
	created() {
        // console.log('getPageData', getXueqiuCookieByCache())
	},
    mounted() {
        setTimeout(() => {
            this.getPageData()
        }, 1000)
    },
    beforeDestroy() {
    	if (!this.chart) {
    		return
    	}
    	this.chart.dispose()
    	this.chart = null
    },
	methods: {
        getPageData() {
            let that = this

            // console.log('getPageData', getXueqiuCookieByCache())
            // return

            if (that.dataList.date.length > 0) {
                that.setOptions()
                return
            }

            getJisiluCbIndexHtml().then(res => {
                if (res.err_code === 0) {
                    let _ret = praseJisiluCbIndexHtml(res.data)
                    that.dataList.date = _ret.__date || []
                    that.dataList.data = _ret.__data || {}
                    if (that.dataList.date.length === 0 || !that.dataList.data.avg_dblow) {
                        that.$message.error(res.err_msg || '解析数据失败')
                    } else {
                        that.setOptions()
                    }
                } else {
                    that.$message.error(res.err_msg || '获取数据失败')
                }
            })

        },
        filterData() {
            this.getPageData()
        },
        setOptions() {
            let that = this
            if (!that.chart) {
                that.chart = echarts.init(document.getElementById('chartObj'))
            }
            that.chart.setOption({
                title: {
                    show: false
                },
                tooltip: {
                	trigger: 'axis',
                	axisPointer: {
                		type: 'cross'
                	},
                	padding: [5, 10]
                },
                xAxis: {
                    data: that.dataList.date
                },
                yAxis: {
                    scale: true
                },
                series: [
                    {
                        name: 'VALUE',
                        type: 'line',
                        data: that.dataList.data[that.apiParams.type],
                        itemStyle: {
                        	normal: {
                        		color: '#3888fa',
                        		lineStyle: {
                        			color: '#3888fa',
                        			width: 1
                        		}
                        	}
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                ]
            })
        }
	}
}
</script>

<style lang="scss" scoped>
    .filter-item {
        .filter-item-title {
            margin-right: 5px;
        }
        .filter-item-select {
            width: 150px;
        }
    }
    .charts-wrap {
        max-width: 100%;
        height: calc(100vh - 350px);
    }
    .tip-wrap {
        padding: 30px 0;
        font-size: 13px;
        line-height: 26px;
    }
</style>
